<template>
  <div>
    <Header></Header>
    <Row class="container">
      <i-col span="12" offset="2" class="signup-img-box">
        <img src="/static/img/signup-sale.png" alt="">
      </i-col>
      <i-col span="8" class="box">
        <div class="sign-up-title">
          <h1>欢迎注册账号</h1>
          <br>
          <h2>BIT MALL, 天天低价品质保证, 让消费者钱更值钱</h2>
        </div>
        <div class="sign-up-header">
            <h3>注册账号</h3>
        </div>
          <div class="sign-up-box">
            <div class="form-box">
          <Form>
            <div class="form-elem">
              <span>账号：</span>
              <i-input v-model="signupName" type="text" placeholder="输入用户名">
                <Icon type="person" slot="prepend"></Icon>
              </i-input>
            </div>
            <div class="form-elem">
              <span>密码：</span>
              <i-input v-model="signupPwd" type="password" placeholder="输入密码">
                <Icon type="ios-locked-outline" slot="prepend"> </Icon>
              </i-input>
            </div>
            <div class="form-elem">
              <button v-on:click.prevent="signup">提交</button>
            </div>

          </Form>
          </div>
            <transition mode="out-in">
              <router-view></router-view>
            </transition>
          </div>

      </i-col>
    </Row>
  </div>
</template>

<script>
import axios from 'axios';
import Footer from "./footer/Footer";
import Header from "./header/Header";

export default {
  name: 'SignUp',
  components: {Header, Footer},
  data: function () {
    return {
      signupName: '',
      signupPwd: '',
      signupResponse: null,
    }
  },
  methods: {
    signup() {
      const that = this;
      axios.get(`https://wiwilz.cn/api/user/${this.signupName}/`).then(
        () => {
          //提示他用户已存在
          this.$Message.error('用户名已存在');
        }
      ).catch(
        () => {
          axios
            .post('https://wiwilz.cn/api/user-signup/', {
              username: this.signupName,
              password: this.signupPwd,
            })
            .then(function (response) {
              that.signupResponse = response.data;
              alert('用户注册成功，快去登录吧！');
              that.$Message.message('用户注册成功，快去登录吧！');
            })
            .catch(() => {
              // alert(error.message);
              that.$Message.message('用户名已存在');
              // Handling Error here...
              // https://github.com/axios/axios#handling-errors
            });
        },
      )
    }
  }
}
</script>

<style scoped>
.container {
  margin: 15px auto;
  height: 500px;
  overflow: hidden;
}
.signup-img-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signup-img-box>img {
  height: 80%;
}
.sign-up-title {
  width: 430px;
  margin: 15px auto;
  height: 80px;
}
.sing-up-step-box {
  margin: 15px auto;
  padding-left: 30px;
  padding-top: 30px;
  width: 430px;
  height: 380px;
  border: 1px solid #495060;
}
.sign-up-box {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  border: #ED3F14 solid 1px;
}
.sign-up-header {
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 5px;
  color: #fff;
  background-color: #ED3F14;
}
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#signup {
  text-align: center;
}
.form-box {
  width: 80%;
  margin: 30px auto;
}
.form-elem {
  padding: 10px;
}
input {
  height: 25px;
  padding-left: 10px;
}
button {
  height: 38px;
  cursor: pointer;
  border: none;
  outline: none;
  background: #ED3F14;
  color: whitesmoke;
  border-radius: 5px;
  width: 300px;
}
</style>
